﻿@namespace BlazorFluentUI
@inherits FluentUIComponentBase

@if (!IsOpen && !isAnimating)
{

}
else
{
    <Layer ClassName="ms-Modal-Layer">
        <Popup Role=@((IsModeless || !IsBlocking) ? "dialog" : "alertdialog" )
               ClassName=@(!IsOpen && !isAnimating ? "ms-Modal-hiddenModal" : "")
               AriaLabelledBy=@TitleAriaId
               AriaDescribedBy=@SubtitleAriaId
               OnDismiss=@OnDismiss>
            <div class=@($"mediumFont ms-Modal{(isAnimating ? (IsOpen ? " fadeIn100" : " fadeOut200") : "")}{(IsOpen ? " isOpen" : "")}{(IsModeless ? " isModeless" : "")}{(TopOffsetFixed ? " topOffsetFixed" : "")} {ClassName}")
                 aria-hidden=@(!IsOpen && isAnimating)
                 style=@(Style)>
                @if (!IsModeless)
                {
                    if (IsBlocking)
                    {
                        <Overlay IsDarkThemed=@IsDarkOverlay />
                    }
                    else
                    {
                        <Overlay IsDarkThemed=@IsDarkOverlay
                                              OnClick=@((ev) => OnDismiss.InvokeAsync(ev)) />
                    }
                }
                <FocusTrapZone ClassName=@($"ms-Modal-main {ContainerClass}")
                               Disabled=@(!IsOpen)
                               ElementToFocusOnDismiss=@ElementToFocusOnDismiss
                               IsClickableOutsideFocusTrap=@(IsModeless || IsClickableOutsideFocusTrap || !IsBlocking)
                               IgnoreExternalFocusing=@IgnoreExternalFocusing
                               ForceFocusInsideTrap=@(IsModeless ? !IsModeless : ForceFocusInsideTrap)
                               FirstFocusableSelector=@FirstFocusableSelector
                               FocusPreviouslyFocusedInnerElement="true">
                    <div @ref="allowScrollOnModal"
                         class="ms-Modal-scrollableContent"
                         data-is-scrollable=true>
                        @ChildContent
                    </div>
                </FocusTrapZone>
            </div>
        </Popup>
    </Layer>

}